
/*尽量少嵌套：避免性能问题和移植性问题*/

/*
 *使用Iconfont，字体文件代替图片文件展示图标
 *Iconfont的体积更小
 *Iconfont是矢量图，拉伸不变形，颜色可自行更换，支持CSS3对字体的修饰效果
 */
@font-face {
  font-family: 'icons-turn-arrow';
  src: url('../fonts/icons/turn-arrow.eot') format('enbedded'),
       url('../fonts/icons/turn-arrow.woff') format('woff'),
       url('../fonts/icons/turn-arrow.ttf') format('truetype'),
       url('../fonts/icons/turn-arrow.svg') format('svg');
}

/* 变量定义 */
@photoWidth: 260px;
@photoHeight: 300px;

/* Base Application Styles */
html,body {
  width: 100%;
  height: 100%;
  background: #222;
}

.app{
  width: 100%;
  height: 100%;
}

/* stage -- start */
.stage{
  position: relative;
  width: 100%;
  height: 100%;
}
/* stage -- end */

/* image -- start */
.img-sec {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ddd;

  /*
   * 添加景深，增强3D效果。
   * 当为元素设置perspective，子元素会获得透视效果，而不是元素本身
   */
  perspective: 1800px;
}

.img-figure {
  position: absolute;
  width: @photoWidth;
  height: @photoHeight;
  margin: 0;
  padding: 30px;
  box-sizing: border-box; /* width包含padding\border */
  background-color: #fff;

  cursor: pointer;

  transform: translate3d(0 50% 0);  /* 被转换元素的位置 3D的分别对应: x轴，y轴，z轴，默认是：50% 50% 0 */
  transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out; /* transform、left、top分别应用过渡效果，0.6秒完成，慢速开始和结束 */

  img {
    width: 100%;
  }

  /* 图片翻转  -- start */
  &.is-inverse {
    transform: translate(260px) rotateY(180deg);
  }
  /* 图片翻转  -- end */
}

figcaption{
  text-align: center;

  .img-title{
    margin: 20px 0 0 0;
    color: #a7a0a2;
    font-size: 16px;
  }

  .img-back {
    position: absolute; /* 相对于img-sec进行定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px 40px;
    overflow: auto;
    color: #666;
    background: #fff;

    transform: rotateY(180deg) translateZ(1px);
  }
}
/* image -- end */

/* controller -- start */
.controller-nav {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 101; /* 11的二次方 */
  width: 100%;
  text-align: center;

  transition: background-color 6s;
}

.controller-unit {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px;

  background-color: #aaa;
  border-radius: 50%;
  cursor: pointer;

  transform: scale(.5);
  transition: transform .6s ease-in-out, background-color .3s; /* 增加过渡效果 */

  vertical-align: middle;

  &.is-center {
    transform: scale(1);

    background-color: #888;

    &::after {
      font-family: 'icons-turn-arrow'; /* 引用字体文件 */
      content: '\e600'; /* 使用字体文件的Unicode码对字体进行引用 */
      font-size: 80%;

      line-height: 30px; /* 设置成和圆点一样的高度，使之垂直居中 */
      color: #fff;

      /*
      * 屏幕渲染机制：灰阶渲染（控制边缘亮度，所耗内存相对较低，应用于手机） 亚像素渲染（效果更好，所耗内存相对更高，应用于Mac等）
      * Mac上有些浅色字体图片（在上面设置了白色，可以设置为深色进行测试）在浏览器上显得较粗
      * 解决方案：修改浏览器的属性：
      */
      -webkit-font-smoothing: antialiased; /* 开启chrome在Mac下字体渲染的灰阶平滑 */
      -moz-osx-font-smoothing: grayscale; /* 开启firefox在Mac下字体渲染的灰阶平滑 */
    }

    &.is-inverse {
      background-color:  #555;

      transform: rotateY(180deg); /* 翻转180度 */
    }
  }
}

/* controller -- end */
